<template>
  <div
    class="box"
    :style="{
      backgroundImage: isLandscape ? 'url()' : ''
    }"
  >
    <iframe src="starry_cat/index.html" frameborder="0" class="bg" v-if="isLandscape"></iframe>
    <div class="switchSakura" v-if="!isLandscape">
      {{ showSakura ? '收起发发' : '呐，发发' }}
      <van-switch
        v-model="showSakura"
        style="margin-left: 10px"
        inactive-color="gray"
        active-color="#fdc7f4"
        @change="changeSakuraVisible"
      >
      </van-switch>
    </div>
    <div class="box_contain">
      <div class="des">{{ texts.text1 }}</div>
      <div class="des">{{ texts.text2 }}</div>
      <div class="des">{{ texts.text3 }}</div>
      <div class="des">{{ texts.text4 }}</div>
      <transition name="fade">
        <div v-show="showTimes" class="time">{{ diffDays }}</div>
      </transition>
      <div class="des">{{ texts.text5 }} {{ texts.text6 }}</div>
      <div id="option">
        <RouterLink class="nav" to="/TimeLine">大事记 </RouterLink>
        <RouterLink class="nav" to="/YiMa"> 姨妈日历 </RouterLink>
        <RouterLink class="nav" to="/webviews?src=balloon520/index.html"> 告白气球 </RouterLink>
        <RouterLink class="nav" to="/JigsawPuzzle">拼图 </RouterLink>
        <RouterLink class="nav" to="/webviews?src=christmas_tree/index.html&name=圣诞树">
          圣诞树
        </RouterLink>
        <a class="nav" href="heartTree/index.html?fromMain=1"> 爱心树 </a>
        <RouterLink class="nav" to="/webviews?src=birthday23/index.html">生日快乐 </RouterLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, reactive, ref } from 'vue'
import { startPlay, stopPlay } from './js/yinghua.js'

let showSakura = ref(false)
function changeSakuraVisible(value) {
  if (value) {
    startPlay()
  } else {
    stopPlay()
  }
}
onBeforeUnmount(() => {
  stopPlay()
})

const startTime = '2017/7/7 GMT+0800'
let diffDays = ref('')
let timer = setInterval(() => {
  let time1 = new Date(startTime).getTime()
  let time2 = new Date().getTime()
  let mss = time2 - time1
  let days = parseInt(mss / (1000 * 60 * 60 * 24))
  diffDays.value = days + '天 '
}, 1000)
onBeforeUnmount(() => {
  clearInterval(timer)
})

let isLandscape = ref(false)
const onResize = () => {
  if (window.innerWidth > window.innerHeight) {
    isLandscape.value = true
  } else {
    isLandscape.value = false
  }
}
onResize()
window.addEventListener('resize', onResize)
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})

const layTime = 330
const texts = reactive({ text1: '', text2: '', text3: '', text4: '', text5: '', text6: '' })
let showTimes = ref(false)
let typeTimer
onBeforeUnmount(() => {
  clearInterval(typeTimer)
})
const typewrite = (story, row, forever) => {
  return new Promise((resolve) => {
    let i = 0
    typeTimer = setInterval(function () {
      let text = story.substring(0, i)
      i++
      texts[row] = text
      if (text.length == story.length) {
        if (!forever) {
          clearInterval(typeTimer)
          resolve()
        } else {
          i = 0
        }
      }
    }, layTime)
  })
}
const typeRows = async () => {
  await typewrite('在二零一七年七月七号下午', 'text1')
  await typewrite('我第一次见你', 'text2')
  await typewrite('直到今天', 'text3')
  await typewrite('已经过去了', 'text4')
  showTimes.value = true
  await typewrite('未完，待续', 'text5')
  await typewrite('. . . ', 'text6', true)
}
typeRows()
</script>

<style scoped>
.switchSakura {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  display: flex;
  align-items: center;
}
.box {
  width: 100vw;
  height: 100vh;
  background-image: url(./img/yinghua.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'love';
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
}
.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -1;
}

.box_contain {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  background: rgba(255, 192, 203, 0.2);
  border-radius: 16px;
}

.des {
  font-size: 18px;
  line-height: 40px;
  padding: 0 20px;
  font-family: 'love';
  color: #fff;
}

.time {
  font-size: 29px;
  font-weight: bolder;
  color: #fff;
  letter-spacing: 3px;
}

#option {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nav {
  margin: 4px;
  padding: 0 1rem;
  line-height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: center;
}
</style>
